<template>
   <view class="container">
    <view class="top">
      <NavBar :bgColor="'#fff'" :title="'个人中心'" :textColor="'#000'" />
      <view class="user-info">
        <view class="cover-img">
          <image v-if="isLogin && userInfo.avatar" class="avatar-img" :src="userInfo.avatar"></image>
          <image v-else @click="showLoginDialog" class="avatar-img" src="/static/images/user.png"></image>
        </view>
        <text class="name" v-if="isLogin && userInfo.nickname">{{userInfo.nickname}}</text>
        <text class="name" v-else @click="showLoginDialog">请点击授权登录</text>
      </view>
      <view class="user-tip">
        <view class="tip-item" @click="goHistory">
          <u-icon class="icon1" name="order" size="52rpx" />
          <text class="tip-text">浏览</text>
        </view>
        <view class="tip-item" @click="goCollect">
          <u-icon class="icon2" name="star" size="52rpx" />
          <text class="tip-text">收藏</text>
        </view>
      </view>
    </view>
    <view class="middle">
      <view class="grid-list">
        <view class="grid-item" @click="goMessage">
          <text class="grid-tit">求片留言</text>
          <u-icon name="arrow-right" size="24rpx" class="arrow-icon" />
        </view>
        <view class="grid-item" @click="goAbout">
          <text class="grid-tit">关于我们</text>
          <u-icon name="arrow-right" size="24rpx" class="arrow-icon" />
        </view>
        <view class="grid-item" @click="goContact">
          <text class="grid-tit">联系我们</text>
          <u-icon name="arrow-right" size="24rpx" class="arrow-icon" />
        </view>
      </view>
    </view>
    <LoginDialog />
  </view>
</template>

<script>
import NavBar from "@/components/nav-bar/nav-bar";
import { mapState } from "vuex";
export default {
  name: "mine",
  components: {
    NavBar,
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    // 关于我们
    goAbout() {
      uni.navigateTo({url: '/pages/mine/mine_about'});
    },
    // 留言
    goMessage() {
      if (!this.isLogin || !this.token) {
        this.showLoginDialog();
        return;
      }
      uni.navigateTo({url: '/pages/mine/mine_message'});
    },
    // 联系我们
    goContact() {
      uni.showToast({title: '暂未开放', icon: 'none'});
    },
    // 浏览
    goHistory() {
      uni.navigateTo({url: '/pages/mine/mine_history'});
    },
    // 收藏
    goCollect() {
      if (!this.isLogin || !this.token) {
        this.showLoginDialog();
        return;
      }
      uni.navigateTo({url: '/pages/mine/mine_collect'});
    },
    // 展示授权弹窗
    showLoginDialog() {
      this.$store.commit('showLoginDialog');
    },
  },
  computed: {
    ...mapState({
      isLogin: (state) => state.isLogin,
      userInfo: (state) => state.userInfo,
      token: state => state.token
    })
  }
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  .top {
    padding-top: 200rpx;
    .user-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .cover-img {
        width: 120rpx;
        height: 120rpx;
        .avatar-img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .name {
        font-size: 30rpx;
        color: #000;
        margin-top: 12rpx;
      }
    }
    .user-tip {
      width: 690rpx;
      height: 140rpx;
      background-color: #f8f7fc;
      margin: 80rpx auto 0;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tip-item {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .tip-text {
          font-size: 24rpx;
          color: #333;
          margin-top: 10rpx;
        }
      }
    }
  }
  .middle {
    margin-top: 30rpx;
    .grid-list {
      width: 690rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 auto;
      .grid-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx 0;
        border-bottom: 0.5px solid #e6e6e6;
        .grid-tit {
          font-size: 28rpx;
          color: #000;
        }
      }
    }
  }
}
</style>